<template>
    <div class="w750" :class="themes.theme">
        <!-- 申请推广达人 -->
        <div v-if="extension.type == 'apply' || extension.type == 'auto'" class="extension-apply bg-white">
            <van-notice-bar
                v-if="extension.type == 'auto'"
                left-icon="volume-o"
                class="position-sticky top-0"
                scrollable
                text="很抱歉,您未达成成为分享员的条件"
            />
            <div style="font-size: 13px; line-height: 20px">
                <p v-if="appShopRecruitPostersDto.content" v-html="appShopRecruitPostersDto.content" class="extensionImg" style="padding: 10px">
                    {{ appShopRecruitPostersDto.content }}
                </p>
                <div v-if="extension.type == 'apply'" class="apply-btn" @click="changeApply" :style="{ background: themes.color }">
                    申请成为推广达人
                </div>
                <template v-else>
                    <div class="apply-btn" @click="goIndex" :style="{ background: themes.color }">返回首页</div>
                </template>
            </div>
        </div>
        <!--审核页面-->
        <template v-if="extension.type == 'audit' || extension.type == 'failed' || extension.type == 'expelled'">
            <Noempty :pic="extensionObj[extension.type].pic" :title="extensionObj[extension.type].title" />
            <div class="extension-apply" v-if="extension.type == 'failed'">
                <div class="apply-btn" @click="changeApply" :style="{ background: themes.color }">重新审核</div>
            </div>
            <div class="empty-item-btn" @click="goIndex">
                <span>返回首页</span>
            </div>
        </template>
        <!-- 我的推广 -->

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
            <div v-if="extension.type == 'center'">
                <div class="p-15p" :style="memberColor.bgColor">
                    <!-- 会员等级 -->
                    <div class="text-fff p-2 rounded-8 bg-main" style="height: 140px">
                        <div class="d-flex mb-3 position-relative">
                            <div style="width: 50px; height: 50px">
                                <img
                                    :src="posterAttr.pic ? $imgUrlHead + posterAttr.pic : require('@/assets/images/detailDefault.jpg')"
                                    alt=""
                                    class="w-100 h-100 rounded-circle"
                                />
                            </div>
                            <div class="d-flex flex-column j-sa ml-1 flex-1">
                                <div class="d-flex a-center">
                                    <span class="font-16 line-clamp1" style="width: auto; max-width: 2rem">
                                        {{ promoteInfoDto.nickName ? promoteInfoDto.nickName : promoteInfoDto.userMobile }}
                                    </span>
                                    <div class="border rounded-20 border-c-fff-05 position-relative ml-1 d-flex">
                                        <div
                                            class="position-absolute left-0 top-0 bg-fff rounded-circle d-flex"
                                            style="padding: 6px; left: -2%; top: -13%"
                                        >
                                            <img
                                                v-if="promoteInfoDto.gradeLogo"
                                                :src="$imgUrlHead + promoteInfoDto.gradeLogo"
                                                style="width: 14px; height: 14px"
                                                alt=""
                                            />
                                            <svg v-else class="icon-member d-block" :style="memberColor.crownColor" aria-hidden="true">
                                                <use xlink:href="#iconcrown"></use>
                                            </svg>
                                        </div>
                                        <div class="d-flex" style="padding: 4px 5px 5px 26px; max-width: 2rem; overflow: hidden">
                                            <!-- SVG实现9px文字，但是存在width不能自动缩放(使用js动态调节width) -->
                                            <svg width="40" id="grade" height="10" class="" style="fill: currentColor; color: #fff">
                                                <text width="100%" dominant-baseline="top" text-anchor="" font-size="9" y="8.52">
                                                    {{ promoteInfoDto.grade ? promoteInfoDto.grade : '普通会员' }}
                                                </text>
                                            </svg>

                                            <!-- canvas实现9px，但是会存在移动端模糊 -->
                                            <!-- <canvas id="grade" width="100" height="11"></canvas> -->
                                        </div>
                                    </div>
                                </div>
                                <span class="font-14">分享码：{{ promoteInfoDto.invitationCode || '-' }}</span>
                            </div>
                            <div class="position-absolute top-0" style="right: -20px" @click="goRuleDetail">
                                <div style="padding: 5px 5px 5px 16px; background: rgba(255, 255, 255, 0.25); border-radius: 14px 0px 0px 14px">
                                    <div class="font-12 opacity-7">规则说明</div>
                                </div>
                            </div>
                        </div>
                        <div @click="goPage('0')">
                            <template v-if="promoteInfoDto.distributeModel == 'INFINITE'">
                                <span class="font-14">
                                    直接下级{{ promoteInfoDto.firstLevelNum }}人，团队人数{{ promoteInfoDto.totalLevelNum }}人
                                </span>
                            </template>
                            <template v-else>
                                <span class="font-14" v-if="promoteInfoDto.distributeModel == 'FIRST'">
                                    已分享{{ promoteInfoDto.firstLevelNum }}人
                                </span>
                                <span class="font-14" v-if="promoteInfoDto.distributeModel == 'SECOND'">
                                    一级{{ promoteInfoDto.firstLevelNum }}人，二级{{ promoteInfoDto.secondLevelNum }}人
                                </span>
                                <span class="font-14" v-if="promoteInfoDto.distributeModel == 'THIRD'">
                                    一级{{ promoteInfoDto.firstLevelNum }}人，二级{{ promoteInfoDto.secondLevelNum }}人，三级{{
                                        promoteInfoDto.thirdLevelNum
                                    }}人
                                </span>
                            </template>
                        </div>
                    </div>

                    <!-- 会员权益 - 暂时注释-->
                    <!-- <div class="mb-2" v-if="promoteInfoDto.rightsList && promoteInfoDto.rightsList.length">
                        <div class="text-center my-15p">
                            <span class="font-14 text-333">当前权益</span>
                        </div>
                        <template v-if="promoteInfoDto.rightsList.length <= 4">
                            <div :class="'grid-column' + promoteInfoDto.rightsList.length">
                                <div class="text-center" v-for="(item, index) in promoteInfoDto.rightsList" :key="index">
                                    <div class="flex-center">
                                        <div class="right-item" :style="memberColor.rightColor">
                                            <svg class="icon" aria-hidden="true">
                                                <use :xlink:href="rightsObj[item].icon ? rightsObj[item].icon : '#icondiscount'"></use>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="font-12 mt text-333">{{ rightsObj[item].title ? rightsObj[item].title : '商品优惠' }}</div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="d-flex overflow-x-scroll scroll-hidden">
                                <div
                                    class="text-center"
                                    style="width: 23%; display: inline-block; flex-shrink: 0"
                                    v-for="(item, index) in promoteInfoDto.rightsList"
                                    :key="index"
                                >
                                    <div class="flex-center">
                                        <div class="right-item" :style="memberColor.rightColor">
                                            <svg class="icon" aria-hidden="true">
                                                <use :xlink:href="rightsObj[item].icon ? rightsObj[item].icon : '#icondiscount'"></use>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="font-12 mt text-333">{{ rightsObj[item].title ? rightsObj[item].title : '商品优惠' }}</div>
                                </div>
                            </div>
                        </template>
                    </div> -->
                </div>

                <div class="bg-f8 p-15p position-relative" style="border-radius: 12px 12px 0px 0px; top: -10px">
                    <!-- 收益 -->
                    <div class="p-15p bg-fff rounded-4">
                        <div class="d-flex mb-1 a-end">
                            <h1 class="font-18">我的收益</h1>
                            <span class="font-12 text-999 ml">
                                {{ commissionType == 'CASH' ? '(元)' : integralName }}
                            </span>
                        </div>
                        <div class="d-flex">
                            <div style="flex: 1.5" @click="toReflect">
                                <h1 class="font-24 font-weight-600" style="color: #e24641">
                                    <template v-if="commissionType == 'CASH'">
                                        {{ Money(promoteInfoDto.withdrawAmount)[0] }}.{{ Money(promoteInfoDto.withdrawAmount)[1] }}
                                    </template>
                                    <template v-if="commissionType == 'INTEGRAL'">
                                        {{ promoteInfoDto.withdrawAmount }}
                                    </template>
                                </h1>
                                <span class="text-999 font-12">可提现{{ `${commissionType == 'INTEGRAL' ? integralName : '佣金'}` }}</span>
                            </div>
                            <div class="flex-1 a-self-end">
                                <div class="font-14">
                                    <template v-if="commissionType == 'CASH'">
                                        {{ Money(promoteInfoDto.notSettledAmount)[0] }}.{{ Money(promoteInfoDto.notSettledAmount)[1] }}
                                    </template>
                                    <template v-if="commissionType == 'INTEGRAL'">
                                        {{ promoteInfoDto.notSettledAmount }}
                                    </template>
                                </div>
                                <div class="text-999 mt font-12">待结算{{ `${commissionType == 'INTEGRAL' ? integralName : '佣金'}` }}</div>
                            </div>
                            <div class="flex-1 a-self-end">
                                <div class="font-14">
                                    <template v-if="commissionType == 'CASH'">
                                        {{ Money(promoteInfoDto.settledAmount)[0] }}.{{ Money(promoteInfoDto.settledAmount)[1] }}
                                    </template>
                                    <template v-if="commissionType == 'INTEGRAL'">
                                        {{ promoteInfoDto.settledAmount }}
                                    </template>
                                </div>
                                <div class="text-999 mt font-12">已结算{{ `${commissionType == 'INTEGRAL' ? integralName : '佣金'}` }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- 分享 -->
                    <div class="p-15p bg-fff rounded-4 mt-1">
                        <div class="grid-column3">
                            <div class="d-flex flex-column a-center" @click="share">
                                <div
                                    class="rounded-circle flex-center"
                                    style="width: 42px; height: 42px; background: linear-gradient(180deg, #fbf5e0 0%, #fff3e1 100%)"
                                >
                                    <svg class="share-item" style="color: #ffad28" aria-hidden="true">
                                        <use xlink:href="#iconinvite"></use>
                                    </svg>
                                </div>
                                <div class="font-12 mt-1">邀请分享员</div>
                            </div>

                            <div class="d-flex flex-column a-center" @click="eventDraw1">
                                <div
                                    class="rounded-circle flex-center"
                                    style="width: 42px; height: 42px; background: linear-gradient(180deg, #fcf6ea 0%, #f7f0e7 100%)"
                                >
                                    <svg class="share-item" style="color: #d4ab6d" aria-hidden="true">
                                        <use xlink:href="#iconimage"></use>
                                    </svg>
                                </div>
                                <div class="font-12 mt-1">分享海报</div>
                            </div>
                            <!-- 如果个人店铺开启，则隐藏推广商品 -->
                            <div
                                v-if="extension.appDistributorShopEntranceDTO.shopSwitch"
                                class="d-flex flex-column a-center"
                                @click="toPersonalShop"
                            >
                                <div class="rounded-circle flex-center" style="width: 42px; height: 42px; background: #fef3f1">
                                    <svg class="share-item" style="color: #f96402" aria-hidden="true">
                                        <use xlink:href="#icondianpu1"></use>
                                    </svg>
                                </div>
                                <div class="font-12 mt-1">{{ extension.appDistributorShopEntranceDTO.entranceName || '个人店铺' }}</div>
                            </div>
                            <div v-else class="d-flex flex-column a-center" @click="extensionList">
                                <div
                                    class="rounded-circle flex-center"
                                    style="width: 42px; height: 42px; background: linear-gradient(180deg, #fff7f5 0%, #faece8 100%)"
                                >
                                    <svg class="share-item" style="color: #f96402" aria-hidden="true">
                                        <use xlink:href="#iconshare"></use>
                                    </svg>
                                </div>
                                <div class="font-12 mt-1">分享商品</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 查看 -->
                    <div class="px-15p py-1 bg-fff rounded-4 mt-1">
                        <div>
                            <div class="d-flex j-sb py-15p a-center" @click="goPage('0')">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/ext-icon05.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">我的分享</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
                            <div class="d-flex j-sb py-15p a-center" @click="goPage('1')">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/pre-icon02.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">分享订单</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
                            <!-- 当withdrawalFlag为true显示 -->
                            <div class="d-flex j-sb py-15p a-center" @click="goPage('2')" v-if="promoteInfoDto.withdrawalFlag">
                                <template v-if="commissionType == 'CASH'">
                                    <div class="d-flex a-center flex-1">
                                        <div style="width: 18px; height: 18px">
                                            <img src="@/assets/images/pre-icon01.png" class="w-100 h-100" />
                                        </div>
                                        <span class="font-14 ml-15p">佣金提现</span>
                                    </div>
                                    <div style="width: 8px; height: 8px">
                                        <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                    </div>
                                </template>
                            </div>
                            <div class="d-flex j-sb py-15p a-center" @click="goPage('3')" v-if="commissionType == 'CASH'">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/pre-icon04.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">提现记录</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
							<div class="d-flex j-sb py-15p a-center" @click="goPage('8')">
							    <div class="d-flex a-center flex-1">
							        <div style="width: 18px; height: 18px">
							            <img src="@/assets/images/pre-icon09.png" alt="" class="w-100 h-100" />
							        </div>
							        <span class="font-14 ml-15p">使用记录</span>
							    </div>
							    <div style="width: 8px; height: 8px">
							        <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
							    </div>
							</div>
                            <div class="d-flex j-sb py-15p a-center" @click="goPage('4')">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/pre-icon03.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">佣金明细</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
                            <div v-if="promoteInfoDto.shareSalesGrowthFlag" class="d-flex j-sb py-15p a-center" @click="goPage('5')">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/pre-icon05.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">成长数值</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
                            <div v-if="promoteInfoDto.performanceAwardFlag" class="d-flex j-sb py-15p a-center" @click="goPage('6')">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/pre-icon06.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">团队业绩奖励</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
                            <div v-if="promoteInfoDto.distributionTeamAwardFlag" class="d-flex j-sb py-15p a-center" @click="goPage('7')">
                                <div class="d-flex a-center flex-1">
                                    <div style="width: 18px; height: 18px">
                                        <img src="@/assets/images/pre-icon07.png" alt="" class="w-100 h-100" />
                                    </div>
                                    <span class="font-14 ml-15p">达标奖励</span>
                                </div>
                                <div style="width: 8px; height: 8px">
                                    <img src="@/assets/images/arrow.png" alt="" class="w-100 h-100 v-top" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-pull-refresh>

        <template v-if="needBindPhone">
            <Noempty :pic="require('@/assets/images/cart-empty.png')" title="请先绑定手机号码" />
            <div class="empty-item-btn" @click="goIndex">
                <span>返回首页</span>
            </div>
        </template>

        <!-- 接口报错时显示 -->
        <template v-if="indexStatus">
            <Noempty :pic="require('@/assets/images/cart-empty.png')" title="商家暂未开放分享，请联系商家" />
            <div class="empty-item-btn" @click="goIndex">
                <span>返回首页</span>
            </div>
        </template>

        <div style="height: 48px"></div>

        <share-sheet ref="shareSheet" title="分享好友" :prames="shareConfig" :shareType="[{ type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') }]"></share-sheet>

        <!-- 海报弹窗 -->
        <van-popup @click="preview" v-model="posterShow" :close-on-click-overlay="false" position="center" class="poster-popup">
            <div>
                <div class="position-relative">
                    <div class="share-image">
                        <img :src="src" alt="分享海报" class="haibao-img" style="pointer-events: inherit" />
                    </div>
                    <div @click.stop class="position-absolute left-0 w-100 py-1 text-center rounded-22 text-fff bg-main" style="bottom: -60px">
                        <span>长按图片保存到本地</span>
                    </div>
                    <div class="position-absolute" @click.stop="closeCode" style="top: -15px; right: -15px; width: 30px; height: 30px; z-index: 3001">
                        <img class="w-100 h-100" src="@/assets/images/close1.png" alt="" />
                    </div>
                </div>
            </div>
        </van-popup>

        <!-- 生成海报的组件 -->
        <vue-canvas-poster class="poster" :painting="painting1" @success="success" @fail="fail"></vue-canvas-poster>

        <!-- 申请分享达人弹窗 -->
        <van-action-sheet v-model="applyShow" title="推广达人申请" class="bg-f8" style="font-size: 0.3rem">
            <div class="p-1 h-100 w-100" style="border-radius: 15px; overflow: hidden; padding: 10px 16px">
                <van-form @submit="onSubmit" class="rounded-15 overflow-h">
                    <template v-if="needWriteInfo">
                        <van-field
                            v-if="needWriteInfo.realName == 'true'"
                            v-model="applyForm.realName"
                            clearable
                            name="姓名"
                            label="姓名"
                            placeholder="请输入姓名"
                        />
                        <van-field
                            v-if="needWriteInfo.mobile == 'true'"
                            v-model="applyForm.mobile"
                            clearable
                            name="手机"
                            label="手机"
                            placeholder="请输入手机号"
                        />
                        <van-field
                            v-if="needWriteInfo.wxNumber == 'true'"
                            v-model="applyForm.wxNumber"
                            clearable
                            name="微信号"
                            label="微信号"
                            placeholder="请输入微信号"
                        />
                        <van-field
                            v-if="needWriteInfo.idCard == 'true'"
                            v-model="applyForm.idCard"
                            clearable
                            name="身份证"
                            label="身份证"
                            placeholder="请输入身份证"
                        />
                        <van-field
                            v-if="needWriteInfo.email == 'true'"
                            v-model="applyForm.email"
                            clearable
                            name="邮箱"
                            label="邮箱"
                            placeholder="请输入邮箱"
                        />
                    </template>
                    <div style="margin: 20px 16px">
                        <van-button round block type="info" :color="themes.color" native-type="submit">提交</van-button>
                    </div>
                </van-form>
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import shareSheet from 'components/share/shareSheet'
import config from 'config/config'
import { getUa } from 'utils/utils'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import { applyPromoter, submitPromoter, getPromotePosterData, distribution, getCommissionTypeInfo } from 'api/extensionApi'
import { tokenManage } from 'utils/Cache'
import { sendSMSCode } from 'api/common/common'
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
import { getUserInfo } from 'api/account'
import { VueCanvasPoster } from 'vue-canvas-poster'
import { ImagePreview } from 'vant'

export default {
    components: {
        Noempty,
        shareSheet,
        QRCode,
        VueCanvasPoster
    },
    data() {
        return {
            isLoading: false, // 是否刷新
            painting1: {},
            posterShow: false,
            Money: cash, //价格转换
            appShopRecruitPostersDto: null,
            extension: {
                // type: 'center'
            },

            promoteInfoDto: '',
            isPosters: false, //默认商家没开启海报,
            shareConfig: {},
            shareUrl: window.location.href, //分享的链接
            posterData: null,
            posterDataUrl: '',
            isLogin: tokenManage.getToken() ? true : false, //默认没登录
            //头像跟名字
            posterAttr: {
                name: '',
                pic: ''
            },
            src: '',
            visible: false,
            commissionType: 'CASH',
            memberLevel: 1, // 会员等级，根据会员等级来切换颜色(TODO => 目前暂时写死一种颜色，不会有等级切换颜色)

            applyForm: {}, // 申请表单
            applyShow: false,
            needWriteInfo: null,
            extensionObj: {
                // 自动成为分享员
                auto: {
                    title: '很抱歉，您未达成成为分享员的条件！',
                    pic: require('@/assets/images/empty-failed.png')
                },
                // 审核中
                audit: {
                    title: '已提交审核，请您耐心等候！',
                    pic: require('@/assets/images/empty-audit.png')
                },
                // 审核被拒绝
                failed: {
                    title: '很抱歉，您的申请已被商家拒绝',
                    pic: require('@/assets/images/empty-failed.png')
                },
                // 被开除
                expelled: {
                    title: '很抱歉，您已被商家开除！',
                    pic: require('@/assets/images/empty-expelled.png')
                }
            },
            rightsObj: {
                DISCOUNT: {
                    icon: '#icondiscount',
                    title: '商品优惠'
                },
                PERFORMANCE_AWARD: {
                    icon: '#iconteam',
                    title: '团队业绩奖励'
                },
                PROMOTION_REWARD: {
                    icon: '#iconextension',
                    title: '推广奖励'
                },
                SELF_PURCHASE_REWARDS: {
                    icon: '#iconshopcart',
                    title: '自购奖励'
                },
                DISTRIBUTION_TEAM_AWARD: {
                    icon: '#iconreward',
                    title: '达标奖励'
                }
            },

            needBindPhone: false, // 判断用户有没有绑定手机 true => 没有绑定手机 / false => 绑定手机
            indexStatus: false, // 接口报错时显示 false => 接口没报错 / true => 接口报错
            type: '' // extension类型
        }
    },
    computed: {
        ...mapState(['themes', 'integralName']),
        // 根据会员等级切换颜色
        memberColor() {
            // 背景色
            const bgColorDict = {
                1: '#fff',
                2: 'linear-gradient(180deg, #f9dbb9 0%, #eac092 100%)',
                3: 'linear-gradient(180deg, #F0D2C8 0%, #E3B4A2 100%)'
            }
            // 会员卡颜色
            const cartColorDict = {
                1: 'linear-gradient(204deg, #365B9B 0%, #6B95D4 63%, #335798 100%)',
                2: 'linear-gradient(204deg, #371E02 0%, #804B12 65%, #281702 100%)',
                3: 'linear-gradient(204deg, #2A140D 0%, #7B4835 65%, #1E0D08 100%)'
            }
            // 皇冠颜色
            const crownColorDict = {
                1: '#B7B7B7',
                2: '#EAC193',
                3: '#E3B5A3'
            }

            // 权益颜色
            const rightColorDict = {
                1: 'linear-gradient(180deg, #6596E0 0%, #3665B0 100%)',
                2: 'linear-gradient(180deg, #A06D37 0%, #76461E 100%)',
                3: 'linear-gradient(180deg, #976452 0%, #63372A 100%)'
            }

            return {
                bgColor: {
                    background: bgColorDict[this.memberLevel]
                },
                cartColor: {
                    background: `url(../../../assets/images/member-card-bg.png) no-repeat right bottom, ${cartColorDict[this.memberLevel]}`,
                    backgroundSize: '40%, 100%'
                },
                crownColor: {
                    color: crownColorDict[this.memberLevel]
                },
                rightColor: {
                    background: rightColorDict[this.memberLevel]
                }
            }
        }
    },
    mounted() {
        this.promoteCenter()
        // 获取用户信息
        if (this.isLogin) {
            getUserInfo()
                .then((res) => {
                    if (res.status == 1) {
                        this.posterAttr.name = res.result.nickName
                        this.posterAttr.pic = res.result.avatarUrl
                    } else {
                        this.posterAttr.name = '匿名'
                        this.posterAttr.pic = ''
                    }
                })
                .catch(() => {
                    this.posterAttr.name = '匿名'
                    this.posterAttr.pic = ''
                })
        } else {
            this.posterAttr.name = '匿名'
            this.posterAttr.pic = ''
        }
    },
    methods: {
        // 返回
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        goIndex() {
            this.$router.replace('/index')
        },

        // 去个人中心
        goMyAccount() {
            this.$router.push('/my')
        },

        //申請分享的状态，以及通过的页面数据
        promoteCenter() {
            applyPromoter()
                .then((res) => {
                    if (res.status == 1) {
                        this.type = res.result.type //存储响应类型
                        this.appShopRecruitPostersDto = res.result.appShopRecruitPostersDto
                        this.promoteInfoDto = res.result.shareSaleInfoDTO
                        // 判断是否需要填写申请数据
                        if (res.result.appShopRecruitPostersDto && res.result.appShopRecruitPostersDto.applyField) {
                            this.needWriteInfo = JSON.parse(res.result.appShopRecruitPostersDto.applyField)
                        }
                        this.extension = res.result
                        if (res.result.type == 'center') {
                            return getPromotePosterData()
                        }
                        if (res.result.needBindPhone) {
                            this.needBindPhone = true
                        }
                    } else {
                        this.indexStatus = true // 接口报错时显示
                    }
                })
                .then((res) => {
                    // 如果不是申请通过 不予请求
                    if (this.type !== 'center') {
                        return
                    }
                    if (res) {
                        let that = this
                        this.isPosters = res.result ? true : false
                        this.posterData = res.result
                        return getCommissionTypeInfo()
                    }
                })
                .then((res) => {
                    // 如果不是申请通过 不予请求
                    if (this.type !== 'center') {
                        return
                    }
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    res && (this.commissionType = res.result.commissionType)

                    // 动态设置等级名称 => 为了实现9px的文字
                    this.$nextTick(() => {
                        let c = document.getElementById('grade')
                        const basicWidth = 10
                        const gradeLen = this.promoteInfoDto.grade ? this.promoteInfoDto.grade.length : '普通会员'.length
                        c.setAttribute('width', gradeLen * basicWidth)
                    })
                    if (this.isLoading) {
                        setTimeout(() => {
                            this.isLoading = false
                        }, 1000)
                    }
                })
        },
        // 申请成为分享员
        changeApply() {
            // 如果申请需要填写数据
            const flag = Object.values(this.needWriteInfo).some((item) => item == 'true')
            if (flag) {
                //  打开申请弹窗
                this.applyShow = true
            } else {
                // 直接提交
                submitPromoter().then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.$toast('申请成功')
                    this.promoteCenter()
                })
            }
        },

        eventDraw1() {
            if (!this.isPosters) {
                this.$toast('商家没开启海报')
                return
            }
            this.painting1 = {
                width: '270px',
                height: '425px',
                background: '#ffffff',
                views: [
                    {
                        type: 'image',
                        url: this.$imgUrlHead + this.posterData.image,
                        css: {
                            width: '250px',
                            height: '310px',
                            left: '10px',
                            top: '10px',
                            right: '10px'
                        }
                    },
                    // 邀请人
                    {
                        type: 'text',
                        text: `来自${this.posterAttr.name ? this.posterAttr.name : '匿名的小可爱'}的推荐`,
                        css: {
                            fontSize: '10px',
                            color: '#fff',
                            textAlign: 'left',
                            padding: '14px 0 0 0',
                            background: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
                            bottom: '116px',
                            left: '15px',
                            width: '200px',
                            height: '32px',
                            maxLines: '1',
                            lineHeight: '15px',
                            borderRadius: '50px',
                            textIndent: '30px',
                            verticalAlign: 'center'
                        }
                    },
                    // 邀请人头像
                    {
                        type: 'image',
                        url: this.posterAttr.pic ? this.$imgUrlHead + this.posterAttr.pic : require('@/assets/images/detailDefault.jpg'),
                        css: {
                            bottom: '120px',
                            left: '18px',
                            width: '22px',
                            height: '22px',
                            borderRadius: '50px',
                            zIndex: 90
                        }
                    },
                    // 邀请语
                    {
                        type: 'text',
                        text: this.posterData.text,
                        css: {
                            fontSize: '14px',
                            color: '#333',
                            textAlign: 'left',
                            top: '330px',
                            left: '10px',
                            width: '170px',
                            maxLines: '2',
                            lineHeight: '20px'
                        }
                    },
                    // 二维码
                    {
                        type: 'qrcode',
                        content: `${window.location.origin}?invitCode=${this.promoteInfoDto.invitationCode}`,
                        css: {
                            bottom: '25px',
                            right: '10px',
                            width: '70px',
                            height: '70px'
                        }
                    },
                    {
                        type: 'text',
                        text: `长按识别购买`,
                        css: {
                            fontSize: '10px',
                            color: '#999',
                            textAlign: 'center',
                            bottom: '8px',
                            right: '15px',
                            width: '64px',
                            height: '14px',
                            maxLines: '1',
                            lineHeight: '14px'
                        }
                    },
                    // 邀请码
                    {
                        type: 'text',
                        text: `分享码${this.promoteInfoDto.invitationCode ? this.promoteInfoDto.invitationCode : 'UUP6666'}`,
                        css: {
                            fontSize: '14px',
                            color: '#EE4133',
                            textAlign: 'center',
                            padding: '5px 10px',
                            background: 'rgba(238, 65, 51, 0.1)',
                            bottom: '15px',
                            left: '20px',
                            width: '150px',
                            height: '22px',
                            maxLines: '1',
                            lineHeight: '18px',
                            borderRadius: '2px'
                        }
                    }
                ]
            }
        },

        success(src) {
            this.posterShow = true
            this.src = src
        },
        fail(err) {
            this.$toast({
                message: '生成图片失败，请稍后重试',
                duration: 3000
            })
        },

        closeCode() {
            this.posterShow = false
        },

        share() {
            this.$refs.shareSheet.sheetShow = true

            if (this.promoteInfoDto.invitationCode) {
                this.shareConfig.shareText = `${window.location.origin}?invitCode=${this.promoteInfoDto.invitationCode}`
                // if (getUa().isWeixin) {
                //     this.$router.replace({
                //         path: '/applyExtension',
                //         query: {
                //             invitCode: this.promoteInfoDto.invitationCode,
                //         }
                //     })
                // }
            } else {
            }

            // this.shareConfig.shareText = `我抢到优惠券啦！召唤小伙伴一起来抢，名额有限，快来抢！${this.shareUrl}`
        },
        //推广商品
        extensionList() {
            this.$router.push({
                path: '/myExtension/extensionList',
                query: {
                    commissionType: this.commissionType,
                    integralName: this.integralName
                }
            })
        },

        // 跳转页面
        goPage(index) {
            let routerMap = {
                0: '/myExtension/customer',
                1: '/myExtension/topromote',
                2: '/myExtension/toApplyCash',
                3: '/myExtension/extensionWithdraw',
                4: '/myExtension/extensionDet',
                5: '/myExtension/growthNum', //成长数值
                6: '/myExtension/teamReward', // 团队奖励
                7: '/myExtension/teamDistribution', // 达标奖励
				8: '/myExtension/usageRecord' // 达标奖励
            }

            this.$router.push({
                path: routerMap[index],
                query: {
                    commissionType: this.commissionType,
                    integralName: this.integralName
                }
            })
        },

        // 全屏预览
        preview() {
            ImagePreview({
                images: [this.src],
                showIndex: false,
                showIndicators: false
            })
        },
        // 申请提交
        onSubmit() {
            if (this.needWriteInfo.realName == 'true') {
                if (!this.applyForm.realName || this.applyForm.realName.trim() == '') {
                    this.$toast('姓名不能为空')
                    return
                }
            }
            if (this.needWriteInfo.mobile == 'true') {
                const regMobile = /^1[0-9][0-9]{9}$/ //手机号验证
                if (!regMobile.test(this.applyForm.mobile)) {
                    this.$toast('请输入正确的手机号码')
                    return
                }
            }
            if (this.needWriteInfo.wxNumber == 'true') {
                if (!this.applyForm.wxNumber || this.applyForm.wxNumber.trim() == '') {
                    this.$toast('微信号不能为空')
                    return
                }
            }
            if (this.needWriteInfo.idCard == 'true') {
                const regIDCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ //身份证验证
                if (!regIDCard.test(this.applyForm.idCard)) {
                    this.$toast('请输入正确的身份证号码')
                    return
                }
            }
            if (this.needWriteInfo.email == 'true') {
                const regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ //邮箱验证
                if (!regEmail.test(this.applyForm.email)) {
                    this.$toast('请输入正确的邮箱')
                    return
                }
            }
            // 请求
            submitPromoter(this.applyForm).then((res) => {
                if (res.status == 1) {
                    this.applyShow = false
                    this.$toast('申请成功')
                    this.promoteCenter()
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        // 去规则详情说明
        goRuleDetail() {
            this.$router.push({
                name: 'shareRule'
            })
        },

        // 判断是积分还是佣金，去不同的提现页面
        toReflect() {
            if (!this.promoteInfoDto.withdrawalFlag) {
                return
            }
            if (this.commissionType == 'CASH') {
                this.goPage('2')
            } else {
                this.$toPage('integralWithdrawal')
            }
        },

        // 下拉刷新
        onRefresh() {
            this.promoteCenter()
        },

        // 去个人店铺
        toPersonalShop() {
            if (this.extension.appDistributorShopEntranceDTO.shopSwitch) {
                this.$toPage('personalIndex')
            } else {
                this.$toast(this.extension.appDistributorShopEntranceDTO.message)
            }
        }
    }
}
</script>

<style src="../../../assets/css/delivery.css" scoped></style>
<style src="../../../assets/css/extension.css" scoped></style>
<style src="../../../assets/css/empty.css" scoped></style>
<style src="../../../assets/css/pre-deposit.css" scoped></style>
<style scoped>
.extensionImg >>> img {
    max-width: 100% !important;
}
.van-popup {
    overflow-y: unset;
}
.entry-con .con-box .arr {
    width: 8px;
    height: 8px;
    margin-top: 8px;
}

.icon {
    width: 29px;
    height: 29px;
    vertical-align: -0.15em;
    overflow: hidden;
    fill: currentColor;
    color: #fff;
    z-index: 100;
}

.right-item {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(180deg, #a06d37 0%, #76461e 100%); */
    border-radius: 50%;
    position: relative;
}

.right-item::after {
    content: '';
    width: 10px;
    height: 10px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 14px 8px;
    position: absolute;
    background: transparent;
}

.icon-member {
    width: 12px;
    height: 12px;
    vertical-align: -0.15em;
    overflow: hidden;
    fill: currentColor;
    color: #fff;
    z-index: 100;
}

.share-item {
    width: 24px;
    height: 24px;
    vertical-align: -0.15em;
    overflow: hidden;
    fill: currentColor;
    z-index: 100;
}
</style>
